<template>
  <div class="share-box">
    <span>分享：</span>
    <a title="微信"
       rel="nofollow noopener"
       class="share-link wechat"
       @click.prevent="shareWindow(`http://qr.topscan.com/api.php?text=${url}&w=300&el=h&m=10`)">
      <i class="iconfont icon-weixin"></i>
    </a>
    <a title="微博"
       rel="nofollow noopener"
       class="share-link weibo"
       @click.prevent="shareWindow(`http://service.weibo.com/share/share.php?url=${url}&title=${title()}&source=${url}&sourceUrl=${url}&content=${description()}`)">
      <i class="iconfont icon-weibo"></i>
    </a>
    <a title="QQ空间"
       rel="nofollow noopener"
       class="share-link qzone"
       @click.prevent="shareWindow(`http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title()}&summary=${description()}&site=${url}`)">
      <i class="iconfont icon-qq-space"></i>
    </a>
    <a title="email"
       rel="nofollow noopener"
       class="share-link mail"
       @click.prevent="shareWindow(`mailto:?subject=${title()}&body=${url}`)">
      <i class="iconfont icon-youxiang"></i>
    </a>
    <!-- <span class="share-link link" @click="copyPageUrl">
      <i class="iconfont icon-link"></i>link
    </span> -->
  </div>
</template>

<script>
  export default {
    name: 'share',
    props: {
      thistitle: {
        type: String,
        default: ''
      },
      desc: {
        type: String,
        default: ''
      }
    },
    computed: {
      url() {
        return `https://yumengzhong.com${this.$route.fullPath}`
      },
      mobileLayout() {
        return this.$store.state.option.mobileLayout
      }
    },
    methods: {
      // copyPageUrl() {
      //   this.$root.$copyToClipboard(this.url)
      // },
      description() {
        const desc = this.desc
        return desc
      },
      title() {
        const title = this.thistitle + ' | 于梦中的博客空间'
        return title
      },
      shareWindow(url) {
        url = url.includes('mailto') ? url.replace(/\s|\||yumengzhong.com/g, '') : encodeURI(url)
        // 给打开的窗口命名
        const winName = 'newWin'
        // screen.availWidth 获得屏幕宽度
        // screen.availHeight 获得屏幕高度
        // 居中的算法是：
        // 左右居中： (屏幕宽度 - 窗口宽度)/2
        // 上下居中： (屏幕高度 - 窗口高度)/2
        // 窗口宽度,需要设置
        const awidth = screen.availWidth / 6 * 2
        // 窗口高度,需要设置
        const aheight = screen.availHeight / 5 * 2
        // 窗口顶部位置,一般不需要改
        const atop = (screen.availHeight - aheight) / 2
        // 窗口放中央,一般不需要改
        const aleft = (screen.availWidth - awidth) / 2
        // 新窗口的参数
        const param0 = 'scrollbars=0,status=0,menubar=0,resizable=2,location=0'
        // 新窗口的左部位置，顶部位置，宽度，高度
        const params = `top=${atop},left=${aleft},width=${awidth},height=${aheight},${param0}`
        // 打开新窗口
        const win = window.open(url, winName, params)
        // 新窗口获得焦点
        win.focus()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .share-box {
    margin-bottom: 10px;
    border-radius: 3px;
    width: 100%;
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    &.mobile {
      width: 100%;
      display: flex;
      > .share-link {
        display: none;
        &[class*="wechat"],
        &[class*="weibo"],
        &[class*="qzone"] {
          width: auto;
          flex-grow: 1;
          display: inline-block;
        }
        &[class*="qzone"] {
          margin: 0;
        }
      }
    }
    > .share-link {
      cursor: pointer;
      padding: 3px;
      display: inline-block;
      text-align: center;
      &.wechat:hover {
        background-color: rgb(123, 179, 46);
      }
      &.weibo:hover {
        background-color: rgb(230, 22, 45);
      }
      &.qzone:hover {
        background-color: rgb(43, 130, 217);
      }
      &.evernote:hover {
        background-color: rgb(139, 224, 86);
      }
      &.mail:hover {
        background-color: #5dc732;
      }
      &.link:hover {
        background-color: #e67a1c;
      }
      &:hover {
        > .iconfont {
          color: #fff;
        }
      }
    }
  }
</style>
